<template>
  <div :style="swiperItemStyle" :class="[prefixCls,isCard?prefixCls+'-card':'']">
    <slot></slot>
  </div>
</template>
<script>
const prefixCls="vbestui-swiper-item"
export default {
  name: "BSwiperItem",
  inject: {
    swiper: {
      defaule: "",
    },
  },
  data() {
    return {
      width: 0,
      prefixCls:prefixCls
    };
  },
  computed: {
    swiperItemStyle() {
      return {
        width: `${this.width}px`,
      };
    },
    styleHandle() {
      this.$nextTick().then(() => {
        this.width = this.swiper.$el.offsetWidth;
        if(this.isCard){
          this.width=this.width/2;
        }
      });
    },
    isCard(){
      return this.swiper.card;
    }
  },
  created() {
    this.styleHandle;
  },
};
</script>